<template>
  <div>
    <el-row>
      <el-col :span="24">
        <span style="margin-left: 20px;">数据时间：{{realDataObj['collecTimes']}}</span>
      </el-col>
      <el-col :span="24">
        <hr style="border: 2px solid #ccc;" />
      </el-col>

    </el-row>
    <div style="height: 500px;">
    <el-scrollbar style="height: 100%;">
      <el-row>
        <el-col v-for="pointParam in numPointParamObj" :key="pointParam.index" :span="12">
          <el-card :body-style="{ padding: '10px' }" style="margin: 10px;" v-if="pointParam.paramInfo.paramType=='num'">
            <el-row>
              <el-col :span="5">
                <el-card :body-style="{ padding: '2px' }" style="width: 86px;height: 86px;" >
                  <img v-if="pointParam.paramInfo.pic == null || pointParam.paramInfo.pic == ''" :src="factorUrl" class="image" style="width: 80px;height: 80px;">
                  <img v-else :src="pointParam.paramInfo.pic" class="image" style="width: 80px;height: 80px;">
                </el-card>
              </el-col>
              <el-col :span="19">
                <el-row>
                  <el-col :span="18">
                    <div style="font-size: 18px;padding: 10px;">{{pointParam.paramInfo.name}}</div>
                    <div style="font-size: 18px;padding: 10px;float: left;" v-html="realDataObj['param'+pointParam.paramId]"></div>
                    <div style="font-size: 16px;padding-top: 10px;float: left;">({{pointParam.paramInfo.unit}})</div>
                  </el-col>
                  <el-col :span="6">
                    <div style="padding-top: 20px;">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="showChart(pointParam)"
                    ><span style="font-size: 18px;">曲线图</span></el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="24" v-if="numPointParamObj.length>0">
          <hr style="border: 2px solid #ccc;" />
        </el-col>
        <el-col v-for="pointParam in statePointParamObj" :key="pointParam.index" :span="8">
          <el-card :body-style="{ padding: '10px' }" style="margin: 10px;" v-if="pointParam.paramInfo.paramType=='state'">
            <el-row>
              <el-col :span="7">
                <el-card :body-style="{ padding: '2px' }" style="width: 86px;height: 86px;" >
                  <img v-if="pointParam.paramInfo.pic == null || pointParam.paramInfo.pic == ''" :src="factorUrl" class="image" style="width: 80px;height: 80px;">
                  <img v-else :src="pointParam.paramInfo.pic" class="image" style="width: 80px;height: 80px;">
                </el-card>
              </el-col>
              <el-col :span="17">
                <div style="font-size: 18px;padding: 10px;">{{pointParam.paramInfo.name}}</div>
                <div style="font-size: 18px;padding: 10px;float: left;height: 44px;" v-html="realDataObj['param'+pointParam.paramId]"></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="24" v-if="statePointParamObj.length>0">
          <hr style="border: 2px solid #ccc;" />
        </el-col>
        <el-col v-for="pointParam in faultPointParamObj" :key="pointParam.index" :span="8">

          <el-card :body-style="{ padding: '10px' }" style="margin: 10px;" v-if="pointParam.paramInfo.paramType=='fault' && realDataObj['param'+pointParam.paramId]">
            <el-row>
              <el-col :span="7">
                <el-card :body-style="{ padding: '2px' }" style="width: 86px;height: 86px;" >
                  <img v-if="pointParam.paramInfo.pic == null || pointParam.paramInfo.pic == ''" :src="factorUrl" class="image" style="width: 80px;height: 80px;">
                  <img v-else :src="pointParam.paramInfo.pic" class="image" style="width: 80px;height: 80px;">
                </el-card>
              </el-col>
              <el-col :span="17">
                <div style="font-size: 18px;padding: 10px;">{{pointParam.paramInfo.name}}</div>
                <div style="font-size: 18px;padding: 10px;float: left;height: 44px;" v-html="realDataObj['param'+pointParam.paramId]"></div>
              </el-col>
            </el-row>
          </el-card>

        </el-col>

      </el-row>
    </el-scrollbar>
    </div>
    <el-dialog :title="chartTitle" :visible.sync="chartOpen" width="900px" append-to-body >
      <realChart :pointParam="pointParamVo" :collectPoint="collectPoint"/>
    </el-dialog>
  </div>
</template>

<script>
  import { queryRealData } from "@/api/basic/hisMain";
  import realChart from "./realChart";

export default {
  components: { realChart },
  props: {
    collectPoint: {
      type: Object
    }
  },
  data() {
    return {
      factorUrl:require('@/assets/image/factor.jpeg'),
      pointParamVo:{},
      realDataObj:{},
      numPointParamObj:[],
      statePointParamObj:[],
      faultPointParamObj:[],
      queryParams: {
        pointId: this.collectPoint.id
      },
      chartOpen: false,
      chartTitle: ''
    };
  },
  watch:{
    collectPoint(val) {
      this.queryParams.pointId = this.collectPoint.id;
      this.getRealData();
    }
  },
  created() {
    this.getRealData();
  },
  methods: {
    showChart(pointParam){
      this.pointParamVo = pointParam;
      this.chartTitle = '【'+pointParam.paramInfo.name+'】曲线';
      this.chartOpen = true;
    },
    getRealData(){
      let that = this;
      this.numPointParamObj = []
      this.statePointParamObj = []
      this.faultPointParamObj = []
      queryRealData(this.queryParams).then(response => {
        this.realDataObj = response.data;
        this.realDataObj['pointParams'].forEach(function (pointParam) {
          if(pointParam.paramInfo.paramType=='num'){
            that.numPointParamObj.push(pointParam)
          }else if(pointParam.paramInfo.paramType=='state'){
            that.statePointParamObj.push(pointParam)
          }else if(pointParam.paramInfo.paramType=='fault'){
            that.faultPointParamObj.push(pointParam)
          }
        })

      });
    },
  }
};
</script>
<style scoped lang="scss">
  ::v-deep{
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
